<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Months</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script src="../dist/uPlot.iife.js"></script>
		<script>
			let mos = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(",");

			function dataFor(yrs) {
				let ts = [];

				yrs.forEach(y => {
					mos.forEach(m => {
					//	ts.push(Date.parse('11 ' + m + ' ' + y + ' 17:30:00 UTC')/1000);
					//	ts.push(Date.parse('01 ' + m + ' ' + y + ' 23:30:00 UTC')/1000);
						ts.push(Date.parse('01 ' + m + ' ' + y + ' 00:00:00 UTC')/1000);
					})
				});

				let vals = [0,1,2,3,4,5,6,7,8,9,10];

				let data = [
					ts,
					ts.map((t, i) => i == 0 ? 5 : vals[Math.floor(Math.random() * vals.length)]),
				];

				return data;
			}

			const opts = {
				width: 1920,
				height: 200,
				title: "Months",
				tzDate: ts => uPlot.tzDate(new Date(ts * 1e3), 'Etc/UTC'),
				series: [
					{},
					{
						stroke: "red",
					},
				],
				axes: [
					{
						space: (self, axisIdx, scaleMin, scaleMax, plotDim) => {
							let rangeSecs = scaleMax - scaleMin;
							let rangeDays = rangeSecs / 86400;
							let pxPerDay = plotDim / rangeDays;
							// ensure min split space is 28 days worth of pixels
							return pxPerDay * 28;
						},
					},
				],
			};

			let  u = new uPlot({...opts, title: 'No leap year'}, dataFor([2017,2018,2019]), document.body);
			let u2 = new uPlot({...opts, title: '2024 leap year'}, dataFor([2024,2025,2026]), document.body);
		</script>
	</body>
</html>